<template>
  <div class="forget">
    <div class="newset">
      <h3>找回密码</h3>
      <el-steps
        :active="active"
        simple
      >
        <el-step
          title="确认账户"
          icon="el-icon-edit"
        ></el-step>
        <el-step
          title="身份验证"
          icon="el-icon-upload"
        ></el-step>
        <el-step
          title="确认密码"
          icon="el-icon-picture"
        ></el-step>
        <el-step
          title="完成设置"
          icon="el-icon-check"
        ></el-step>
      </el-steps>
      <div class="content">
        <el-row>
          <el-col
            :span="6"
            ref="ruleForm"
            class="tel"
          >
            <div class="grid-content bg-purple">
              <el-form
                :model="ruleForm"
                :rules="rules"
                label-width="0px"
                class="demo-ruleForm"
              >
                <el-form-item prop="tel">
                  <el-input
                    v-model="ruleForm.tel"
                    placeholder="请输入手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="code">

                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入正确的图文验证码"
                    id="code_input"
                  ></el-input>
                </el-form-item>
                <div class="right">
                  <div id="v_container"></div>
                  <p>看不清楚？再来一张</p>
                </div>
              </el-form>
            </div>
          </el-col>
          <el-col
            :span="6"
            ref="ruleForm1"
            class="user"
          >
            <div class="grid-content bg-purple-light">
              <el-form
                :model="ruleForm"
                :rules="rules"
                label-width="0px"
                class="demo-ruleForm"
              >
                <el-form-item prop="imgcode">
                  <el-input
                    v-model="ruleForm.imgcode"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col
            :span="6"
            ref="ruleForm2"
            class="password"
          >
            <div class="grid-content bg-purple">
              <el-form
                :model="ruleForm"
                :rules="rules"
                label-width="0px"
                class="demo-ruleForm"
              >
                <el-form-item prop="pass">
                  <el-input
                    v-model="ruleForm.pass"
                    placeholder="请输入新的登陆密码"
                    type="password"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="pass1">
                  <el-input
                    v-model="ruleForm.pass1"
                    placeholder="请再次输入新的登陆密码"
                    type="password"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col
            :span="6"
            ref="ruleForm3"
            class="success"
          >
            <div class="grid-content bg-purple">
              <h2>恭喜设置成功</h2>
              <p>重置密码成功，请牢记新的登录密码</p>
            </div>
          </el-col>
        </el-row>

      </div>
      <div class="confirm">
        <el-button
          type="warning"
          plain
          @click="next"
        >{{button}}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// import header from "@/assets/images/header.jpg";
// import forget from "@/assets/images/forget.jpg";
// import { getcode, checkCode, passwordWithCode } from "@/api/user";
// import { getCookie } from "@/utils/Cookie";
import { sendCode,verify,getPasswordBack } from '@/pages/api/index.js'
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value != this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      active: 1,
      ruleForm: {
        tel: null,
        code: null,
        imgcode: null,
        pass: null,
        pass1: null
      },
      // header,
      // forget,
      button: "下一步",
      rules: {
        tel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        imgcode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 6, message: "请输入正确的验证码", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        pass1: [{ validator: validatePass2, trigger: "blur" }]
      },
      verifyCode: Object
    };
  },
  methods: {
    next() {
      var flag = true;

      //本地验证码验证 ，以防恶意发送短信
      if (this.active == 1) {
        if (!this.ruleForm.tel || this.ruleForm.tel.length != 11) {
          this.$message.error("请输入正确的手机号码");
          return;
        }
        if (!this.ruleForm.code) {
          this.$message.error("请输入验证码");
          return;
        }
        var res = this.verifyCode.validate(
          document.getElementById("code_input").value
        );
        if (res) {

          sendCode({phone:this.ruleForm.tel}).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg);
              this.active++;
              this.$refs.ruleForm.$el.style.transform = "translateX(-300%)";
          this.$refs.ruleForm1.$el.style.transform = "translateX(0)";
            } else {
              this.$message.error(res.msg);
              return
            }
          });
        } else {
          this.$message.error("验证码错误");
        }
        //和短信验证码进行校验
      } else if (this.active == 2) {
        let content = {
          phone: this.ruleForm.tel,
          code: this.ruleForm.imgcode
        };
        // return
        verify(content).then(res => {
          if (res.code == 0) {
             console.log('success')
            this.active++;
            this.$refs.ruleForm1.$el.style.transform = "translateX(-300%)";
            this.$refs.ruleForm2.$el.style.transform = "translateX(0)";
          } else {
            this.$message.error("验证码错误");
          }
        });
      } else if (this.active == 3) {
        let content = {
          phone: this.ruleForm.tel,
          code: this.ruleForm.imgcode,
          newPassword: this.ruleForm.pass1
        };
        if(this.ruleForm.pass != this.ruleForm.pass1)  {
          this.$message.error('两次输入密码不一致');
          return;
        }
        getPasswordBack(content).then(res => {
          if (res.code == 0) {
            this.$refs.ruleForm2.$el.style.transform = "translateX(-300%)";
            this.$refs.ruleForm3.$el.style.transform = "translateX(0)";
            this.button = "完成 ";
            this.active++;
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.$router.push({
          path: "/login"
        });
      }
    }
  },
  created() {
  },
  mounted() {
    !(function(window, document) {
      function GVerify(options) {
        //创建一个图形验证码对象，接收options对象为参数
        this.options = {
          //默认options参数值
          id: "", //容器Id
          canvasId: "verifyCanvas", //canvas的ID
          width: "100", //默认canvas宽度
          height: "30", //默认canvas高度
          type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
          code: ""
        };

        if (Object.prototype.toString.call(options) == "[object Object]") {
          //判断传入参数类型
          for (var i in options) {
            //根据传入的参数，修改默认参数值
            this.options[i] = options[i];
          }
        } else {
          this.options.id = options;
        }

        this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
        this.options.letterArr = getAllLetter();

        this._init();
        this.refresh();
      }

      GVerify.prototype = {
        /**版本号**/
        version: "1.0.0",

        /**初始化方法**/
        _init: function() {
          var con = document.getElementById(this.options.id);
          var canvas = document.createElement("canvas");
          this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
          this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
          canvas.id = this.options.canvasId;
          canvas.width = this.options.width;
          canvas.height = this.options.height;
          canvas.style.cursor = "pointer";
          canvas.innerHTML = "您的浏览器版本不支持canvas";
          con.appendChild(canvas);
          var parent = this;
          canvas.onclick = function() {
            parent.refresh();
          };
        },

        /**生成验证码**/
        refresh: function() {
          this.options.code = "";
          var canvas = document.getElementById(this.options.canvasId);
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
          } else {
            return;
          }

          ctx.textBaseline = "middle";

          ctx.fillStyle = randomColor(180, 240);
          ctx.fillRect(0, 0, this.options.width, this.options.height);

          if (this.options.type == "blend") {
            //判断验证码类型
            var txtArr = this.options.numArr.concat(this.options.letterArr);
          } else if (this.options.type == "number") {
            var txtArr = this.options.numArr;
          } else {
            var txtArr = this.options.letterArr;
          }

          for (var i = 1; i <= 4; i++) {
            var txt = txtArr[randomNum(0, txtArr.length)];
            this.options.code += txt;
            ctx.font =
              randomNum(this.options.height / 2, this.options.height) +
              "px SimHei"; //随机生成字体大小
            ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
            ctx.shadowOffsetX = randomNum(-3, 3);
            ctx.shadowOffsetY = randomNum(-3, 3);
            ctx.shadowBlur = randomNum(-3, 3);
            ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
            var x = (this.options.width / 5) * i;
            var y = this.options.height / 2;
            var deg = randomNum(-30, 30);
            /**设置旋转角度和坐标原点**/
            ctx.translate(x, y);
            ctx.rotate((deg * Math.PI) / 180);
            ctx.fillText(txt, 0, 0);
            /**恢复旋转角度和坐标原点**/
            ctx.rotate((-deg * Math.PI) / 180);
            ctx.translate(-x, -y);
          }
          /**绘制干扰线**/
          for (var i = 0; i < 4; i++) {
            ctx.strokeStyle = randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(
              randomNum(0, this.options.width),
              randomNum(0, this.options.height)
            );
            ctx.lineTo(
              randomNum(0, this.options.width),
              randomNum(0, this.options.height)
            );
            ctx.stroke();
          }
          /**绘制干扰点**/
          for (var i = 0; i < this.options.width / 4; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(
              randomNum(0, this.options.width),
              randomNum(0, this.options.height),
              1,
              0,
              2 * Math.PI
            );
            ctx.fill();
          }
        },

        /**验证验证码**/
        validate: function(code) {
          var code = code.toLowerCase();
          var v_code = this.options.code.toLowerCase();
          if (code == v_code) {
            return true;
          } else {
            this.refresh();
            return false;
          }
        }
      };
      /**生成字母数组**/
      function getAllLetter() {
        var letterStr =
          "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
        return letterStr.split(",");
      }
      /**生成一个随机数**/
      function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }
      /**生成一个随机色**/
      function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
      }
      window.GVerify = GVerify;
    })(window, document);

    var verifyCode = new GVerify("v_container");
    this.verifyCode = verifyCode;
  }
};
</script>
<style lang="scss">
.forget {
  color: #999;
  width: 100%;
  height: 100%;
  // background: url("../../assets/images/forget.jpg") no-repeat;
  background-size: 100% 100%;
  .newset {
    width: 800px;
    margin: 0 auto;
    overflow: hidden;

    h3 {
      text-align: center;
      padding: 30px 0;
    }
    .content {
      min-height: 200px;
      width: 200%;
      overflow: hidden;
      padding-top: 100px;
      padding-left: 27%;
      input {
        height: 50px;
      }
      .grid-content {
        position: relative;
        left: 0;
        top: 0;
        h2 {
          color: #ff0000;
          text-align: center;
        }
        p {
          text-align: center;
          padding-top: 30px;
        }
      }
      .right {
        position: absolute;
        right: -150px;
        bottom: 0;
        margin-left: 20px;
        line-height: 1;
        canvas {
          position: static;
        }
        p {
          white-space: nowrap;
          padding-top: 0;
        }
        #v_container {
          width: 100px;
          height: 30px;
        }
      }
      // .demo-ruleForm {
      //   transition: 0.5s all;
      //   transform: translateX(300%);
      //   width: 50%;
      //   margin: 0 auto;
      // }
      .el-row {
        height: 100%;
      }
      .el-col-6 {
        position: absolute;
        left: 0;
        right: 0;
        transition: 0.5s all;
        transform: translateX(300%);
        padding-right: 30px;
      }
      .tel {
        transform: translateX(0);
      }
    }
    .confirm {
      text-align: center;
      button {
        width: 200px;
      }
    }
  }
}
</style>


